<template>
  <div class="banner">
    <swiper
      indicator-dots
      :autoplay="autoplay"
      circular
      :slides-per-view="slidesPerView"
      :space-between="spaceBetween"
      class="swiper-container"
    >
      <swiper-slide v-for="(item, i) in list" :key="i">
        <img :src="item.url" alt="" />
      </swiper-slide>
    </swiper>
  </div>
</template>
<script setup>
import "swiper/css";
import { Swiper, SwiperSlide } from "swiper/vue";
import { getList } from "@/api/swiper";
const props = defineProps({
  config: {
    type: Object,
    default: () => {
      return {
        autoplay: {
          type: Boolean,
          default: true,
        },
        slidesPerView: {
          type: Number,
          default: 1,
        },
        spaceBetween: {
          type: Number,
          default: 0,
        },
      };
    },
  },
});

/**
 * 数据列表
 */
const list = ref([]);

/**
 * 获取组件的接口数据
 */
const fetchList = async () => {
  const { code, data } = await getList();
  if (code === rescf.codeVal) {
    list.value = data;
  }
};
fetchList();
</script>
<style scoped lang="scss">
.banner {
  width: 100%;
  min-height: 200px;
  overflow: hidden;
  .swiper-container {
    width: 100%;
    img {
      max-width: 100%;
    }
  }
}
</style>